import 'package:flutter/material.dart';
import 'package:macnov/common/credit_card.dart';
import 'package:macnov/stores/wallet.dart';
import 'package:macnov/utils/colorUtil.dart';
import 'package:macnov/utils/stringUtil.dart';

class AuthVirtualCard extends StatelessWidget {
  final CreditCardViewModel data;

  const AuthVirtualCard({Key key, this.data}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return InkWell(
        child: Container(
      padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
      margin: EdgeInsets.only(top: 20),
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(30)),
          border: Border.all(color: ColorsUtil.hexColor(0XD2D2D2))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset(
                'assets/card/wallet_virtual_card_img.png',
                height: 30,
              )
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 10, left: 10, right: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(this.data.nickName,
                    style: TextStyle(
                        color: ColorsUtil.hexColor(0x1D1D25),
                        fontSize: 18,
                        fontWeight: FontWeight.w600)),
                Expanded(
                  child: Text(
                    r'$' + this.data.availableToSpent,
                    style: TextStyle(
                        color: ColorsUtil.hexColor(0x1D1D25),
                        fontSize: 18,
                        fontWeight: FontWeight.bold),
                    textAlign: TextAlign.right,
                  ),
                )
              ],
            ),
          ),
          _buildCardNumber(),
          Padding(
            padding: EdgeInsets.only(left: 10),
            child: Text(this.data.cardOwner,
                textAlign: TextAlign.left,
                style: TextStyle(
                    color: ColorsUtil.hexColor(0x343434),
                    fontSize: 14,
                    fontWeight: FontWeight.bold)),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Image.asset(
                'assets/wallet/wallet_physucal_card_mastercard.png',
                width: 90,
              )
            ],
          )
        ],
      ),
    ));
  }

  Widget _buildCardNumber() {
    return Container(
      padding: EdgeInsets.only(top: 10, bottom: 10, left: 10),
      child: Row(
        children: <Widget>[
          Text(StringUtil.creditNumFormat(walletStore.authCardInfo.cardId),
              style: TextStyle(
                  color: ColorsUtil.hexColor(0x333333),
                  fontSize: 22,
                  fontWeight: FontWeight.bold))
        ],
      ),
    );
  }
}

class VirtualCard extends StatelessWidget {
  final CreditCardViewModel data;

  const VirtualCard({Key key, this.data}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return InkWell(
        onTap: () => _goDetails(context, data),
        child: Container(
          padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
          margin: EdgeInsets.only(top: 20),
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(30)),
              border: Border.all(color: ColorsUtil.hexColor(0XD2D2D2))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset(
                    'assets/card/wallet_virtual_card_img.png',
                    height: 30,
                  )
                ],
              ),
              Padding(
                padding: EdgeInsets.only(top: 10, left: 10, right: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(this.data.nickName,
                        style: TextStyle(
                            color: ColorsUtil.hexColor(0x1D1D25),
                            fontSize: 18,
                            fontWeight: FontWeight.w600)),
                    Expanded(
                      child: Text(
                        r'$' + this.data.availableToSpent,
                        style: TextStyle(
                            color: ColorsUtil.hexColor(0x1D1D25),
                            fontSize: 18,
                            fontWeight: FontWeight.bold),
                        textAlign: TextAlign.right,
                      ),
                    )
                  ],
                ),
              ),
              _buildCardNumber(),
              Padding(
                padding: EdgeInsets.only(left: 10),
                child: Text(this.data.cardOwner,
                    textAlign: TextAlign.left,
                    style: TextStyle(
                        color: ColorsUtil.hexColor(0x343434),
                        fontSize: 14,
                        fontWeight: FontWeight.bold)),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Image.asset(
                    'assets/wallet/wallet_physucal_card_mastercard.png',
                    width: 90,
                  )
                ],
              )
            ],
          ),
        ));
  }

  Widget _buildCardNumber() {
    return Container(
      padding: EdgeInsets.only(top: 10, bottom: 10, left: 15),
      child: Row(
        children: <Widget>[
          Text(
            '**** **** **** ',
            style: TextStyle(
                color: ColorsUtil.hexColor(0x9B9B9B),
                fontSize: 22,
                fontWeight: FontWeight.bold),
          ),
          Text(
              this.data.cardId.substring(
                  this.data.cardId.length - 4, this.data.cardId.length),
              style: TextStyle(
                  color: ColorsUtil.hexColor(0x343434),
                  fontSize: 22,
                  fontWeight: FontWeight.bold))
        ],
      ),
    );
  }

  _goDetails(BuildContext context, CreditCardViewModel vcard) {
    walletStore.loadAuthCardInfo(vcard);
    Navigator.pushNamed(context, '/vCardDetails', arguments: vcard);
  }
}
